﻿<link rel="stylesheet" type="text/css" href="~/Content/screenstyle/screenindex.css" />
﻿<link rel="stylesheet" type="text/css" href="~/Content/themes/base/jquery-ui.css"/>
<link rel="stylesheet" type="text/javascript" href="~/Content/screenstyle/indexscript.js" />
@model IEnumerable<Vms.Web.Models.SCREEN>
@{
    ViewBag.Title = "Index";
    int i = 0;
}
@section scripts {
  <style type ="text/css">
      #add span
      {
       
        font-style:italic;
      }
     
     .bar
     {
      margin-bottom : 50px;
     }
     
     h1
     {
         margin-bottom: 40px;
     }
     .msg
     {
        
         height: 40px;
     }
     
    .container
    {
        }
  </style>
@*<script type="text/javascript">
    $(document).ready(function () {
        $(".btnEdit").click(function () {
            var id = $(this).attr('id');
            InitializeDialog($("#BrightnessDialog"), id);
            $("#BrightnessDialog").dialog("open");
        });

        //Method to Initialize the DialogBox
        function InitializeDialog($element, id) {
            $element.dialog({
                autoOpen: false,
                resizable: true,
                draggable: true,
                width: 800,
                title: "Edit Brightness",
                model: true,
                show: 'slide',
                closeText: 'x',
                dialogClass: 'alert',
                closeOnEscape: true,
                open: function (event, ui) {
                    //Load the Partial View Here using Controller and Action
                    $element.load('/Screens/EditBrightness/' + id);
                    //   $element.load('/ContentProgram/LibImage');
                },

                close: function () {
                    $(this).dialog('close');
                }

            });

        }
    });
</script>*@

<script type="text/javascript" >
    function deleteScreen(id) {
        $('#screen' + id).remove();
        var stt = parseInt($('#total').val()) - 1;
        $('#total').val(stt);
    }

    function OnSuccessCreateScreen(data) {
        var dt = data.responseText;
        var obj = JSON && JSON.parse(dt) || $.parseJSON(dt);

        var stt = parseInt($('#total').val()) + 1;
        $('#total').val(stt);
        var controllerType = $('#ControlType option:selected').text();

        $('#table').append(
            '<tr id="screen' + obj.Id + '"><td>' + stt + '</td><td>' + obj.Name + '</td><td>'
            + obj.Ip + '</td><td>' + controllerType + '</td><td>' + obj.Width + '</td><td>' + obj.Height + '</td><td>'
            + '<a data-ajax="true" data-ajax-confirm="Are you sure want to delete screen ' + obj.Name + '" data-ajax-method="GET" data-ajax-success="deleteScreen(\'' + obj.Id + '\')" href="/Screens/Delete/' + obj.Id + '">Delete</a>'
            + '<span id="' + obj.Id + '" class="btnEdit">Edit Brightness</span>'
            + '</td>'
        );
        $('#time-wraper').hide(600);
    }

</script>

<script type="text/javascript">
    $(document).ready(function () {
        $('#time-wraper').hide();

        $('#message').hide();

        $('#add_new_screen').click(function () {
            $('#time-wraper').show(600);
        });

        $('#close_create').click(function () {
            $('#time-wraper').hide(600);
        });
    });
</script>

<script type="text/javascript">
    function showMessage(msg) {
        // Show
        $('#message').text(msg);
        $('#message').css("color", 'red');
        $('#message').show(100);
        $('#name').css("color", 'blue');
        // Hide
        $('#message').delay(1500);
        $('#message').hide(600);
    }
</script>



}
<h1 >SCREENS CONFIGURATIONS</h1>
<div class="container">
  <div id="BrightnessDialog" title="Edit Brightness" ></div>
    <div class= "bar">
     <div id="add" style = "float: left;">@Html.ActionLink(" ", "Create", new { }, new { @class = "vms-icon-add", @title = "Add a new screen" }) <span>Add new screen</span></div>
     <div id="nav" style = "float: right;">
      <a href="#" class = "btn btn-info disabled">Screens configuration</a>
        @Html.ActionLink("Brightness control", "BrightnessControl", new { }, new { @class = "btn btn-primary" })
        </div>
    </div>
    
  
  <div class= "msg">
      
      <center>
      <span id="message" ></span> 
     </center>
 </div>

<table class="table table-bordered table-striped" id="table" >
    <tr>
    <th>
    Index
    </th>
        <th>
            Name
        </th>
        <th>
            Ip
        </th>
        <th>
            ControlType
        </th>
        <th>
            Width
        </th>
        <th>
            Height
        </th>
        <th>
        </th>
    </tr>
    <!--
    <tr id="time-wraper">
       @* @{Html.RenderAction("CreateScreen");} *@

    </tr>
    -->
    @foreach (var item in Model)
    {
        i++;
        <tr id="screen@{@item.Id}">
            <!--thu tu-->
            <td> @i
            </td>
            <td>
                @item.Name
            </td>
            <td>
                @item.Ip
            </td>
            <td>
                @Vms.Web.Lib.Utility.GetControllerTypeNameByValue((int)item.ControlType)
            </td>
            <td>
                @item.Width
            </td>
            <td>
                @item.Height
            </td>
            <td>
                @*@Ajax.ActionLink("Edit Screen", "EditScreen", new { screenId = @item.Id }, new AjaxOptions 
                    {
                        HttpMethod = "GET",
                        OnSuccess = "initEditScreen",
                        OnFailure = "alert('Failure')"
                    }, new  {@class = "vms-icon-edit", @title = "Edit" })*@

                    @Html.ActionLink(" ", "Edit", new { id = @item.Id }, new {@class = "vms-icon-edit",@title = "Edit" })


               
                @Ajax.ActionLink(" ", "Delete",null, new AjaxOptions
                    {
                        HttpMethod = "GET",
                        Confirm = "You will delete all the programs in this screen. Are you sure want to delete this?" + @item.Name,
                        OnSuccess = "deleteScreen('" + @item.Id + "')",
                        OnFailure = "showMessage('Cannot delete screen" + @item.Name + "')"
                    }, new { @class="vms-icon-delete", @title = "Delete"})
     
            </td>
        </tr>
    }
</table>
<input type="hidden" id="total" value="@i" />

</div>